<template>
  <div>
    <div style="margin: 10px 0">
      <el-select v-model="leagueId" clearable placeholder="请选择联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague()">
        <el-option v-for="item in leagueoptions" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueSeason+item.leagueName }}
        </el-option>
      </el-select>

      <el-select v-model="gameRounds" clearable placeholder="请选择轮次" style="width: 200px;margin-right: 10px;">
        <el-option v-for="(item,index) in roundsoptions"  :key="index" :label="item" :value="item">
            {{ item }}
        </el-option>
      </el-select>

       <el-select v-model="homeTeam" clearable placeholder="请选择主场球队" style="width: 200px;margin-right: 10px;">
        <el-option v-for="item in homeoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
      </el-select>

      <el-select v-model="awayTeam" clearable placeholder="请选择客场球队" style="width: 200px;margin-right: 10px;">
        <el-option v-for="item in awayoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
      </el-select>

      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
<!--      <el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">-->
<!--        <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>-->
<!--      </el-upload>-->
<!--      <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>-->
    </div>



    <div>


    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="hometeaminfo.teamName" label="主场球队"></el-table-column>
      <el-table-column prop="hometeaminfo.teamImg" label="主场球队图片">
        <template slot-scope="scope">
          <div v-if="scope.row.hometeaminfo.teamImg">
             <img :src="scope.row.hometeaminfo.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="awayteaminfo.teamName" label="客场球队"></el-table-column>
      <el-table-column prop="awayteaminfo.teamImg" label="客场球队图片">
        <template slot-scope="scope">
          <div v-if="scope.row.awayteaminfo.teamImg">
             <img :src="scope.row.awayteaminfo.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="gameTime" label="比赛时间"></el-table-column>
      <el-table-column prop="gameYard" label="比赛场地"></el-table-column>
      <el-table-column prop="gameReferee" label="主裁判"></el-table-column>
      <el-table-column prop="gameRounds" label="轮次"></el-table-column>
      <el-table-column prop="league.leagueSeason" label="赛季"></el-table-column>
      <el-table-column prop="league.leagueName" label="联赛"></el-table-column>
      
      <el-table-column label="操作"  width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="gamedata(scope.row)" ><i class="el-icon-s-marketing"></i>比赛详细数据</el-button>
          <el-button type="warning" @click="playerdata(scope.row)" ><i class="el-icon-s-marketing"></i>球员场上数据</el-button>
          <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="比赛信息" :visible.sync="dialogFormVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="联赛">
        <el-select v-model="form.leagueId" clearable placeholder="请选择联赛" style="width: 200px" @change="EditchangeLeague()">
        <el-option v-for="item in leagueoptions" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="轮次">
        <el-select v-model="form.gameRounds" clearable placeholder="请选择轮次" style="width: 200px">
          <el-option v-for="(item,index) in roundsoptions"  :key="index" :label="item" :value="item">
            {{ item }}
        </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="主场球队">
        <el-select v-model="form.homeTeam" clearable placeholder="请选择主场球队" style="width: 200px">
        <el-option v-for="item in homeoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="客场球队">
      <el-select v-model="form.awayTeam" clearable placeholder="请选择客场球队" style="width: 200px">
        <el-option v-for="item in awayoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
      </el-select>
      </el-form-item>
      
        <el-form-item label="比赛时间">
          <el-input v-model="form.gameTime" autocomplete="off"></el-input>
          <el-date-picker
            v-model="form.gameTime"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="比赛场地">
          <el-select v-model="form.gameYard" clearable placeholder="请选择比赛场地" style="width: 200px">
        <el-option v-for="item in yardoptions" :key="item.id" :label="item.teamHome" :value="item.teamHome">
            {{ item.teamHome }}
        </el-option>
      </el-select>
        </el-form-item>

        <el-form-item label="主裁判">
          <el-input v-model="form.gameReferee" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="比赛详细数据" :visible.sync="gamedataFormVisible" width="50%" >
      <el-form label-width="80px" size="small" >
      <div class="gamedatainfo" style="display: flex;justify-content: center;align-items:center">
      <div style="" >
        <h2>主队：</h2>
        <h1>{{ gamedataform.homeTeamInfo.teamName }}</h1>
        <div v-if="gamedataform.homeTeamInfo.teamImg">
          <img :src="gamedataform.homeTeamInfo.teamImg" width="120" height="120">
        </div>
        <div v-else>无图片</div>
        <div>
          <h1>进攻</h1>
          <el-form-item label="主队进球">
          <el-input v-model="gamedataform.homeGoal" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="主队控球">
          <el-input v-model="gamedataform.homeControl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队射门">
          <el-input v-model="gamedataform.homeShoot" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队射正">
          <el-input v-model="gamedataform.homeOntarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队过人">
          <el-input v-model="gamedataform.homeSurpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
        <div>
          <h1>传球</h1>
        <el-form-item label="主队传球">
          <el-input v-model="gamedataform.homePass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队成功传球">
          <el-input v-model="gamedataform.homeOkpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
        
        <div>
          <h1>犯规</h1>
        <el-form-item label="主队越位">
          <el-input v-model="gamedataform.homeOffside" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队犯规">
          <el-input v-model="gamedataform.homeFoul" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队黄牌">
          <el-input v-model="gamedataform.homeYcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队红牌">
          <el-input v-model="gamedataform.homeRcard" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
      </div>
      <div style="">
        <h2>客队：</h2>
        <h1>{{ gamedataform.awayTeamInfo.teamName }}</h1>
        <div v-if="gamedataform.awayTeamInfo.teamImg">
          <img :src="gamedataform.awayTeamInfo.teamImg" width="120" height="120">
        </div>
        <div v-else>无图片</div>
        <div>
          <h1>进攻</h1>
        <el-form-item label="客队进球">
          <el-input v-model="gamedataform.awayGoal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队控球">
          <el-input v-model="gamedataform.awayControl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队射门">
          <el-input v-model="gamedataform.awayShoot" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队射正">
          <el-input v-model="gamedataform.awayOntarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队过人">
          <el-input v-model="gamedataform.awaySurpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        

        <div>
          <h1>传球</h1>
         <el-form-item label="客队传球">
          <el-input v-model="gamedataform.awayPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队成功传球">
          <el-input v-model="gamedataform.awayOkpass" autocomplete="off"></el-input>
        </el-form-item> 
        </div>
        
        
        <div>
          <h1>犯规</h1>
        <el-form-item label="客队越位">
          <el-input v-model="gamedataform.awayOffside" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队犯规">
          <el-input v-model="gamedataform.awayFoul" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队黄牌">
          <el-input v-model="gamedataform.awayYcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队红牌">
          <el-input v-model="gamedataform.awayRcard" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
      </div>
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gamedataFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savegamedata">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="球员场上数据" :visible.sync="playerdataFormVisible" width="50%" >
      <el-form label-width="80px" size="small" >
      <div class="playerdatainfo" style="display: flex;">
      <div style="" >
        
        <el-form-item label="球队">
        <el-select v-model="playerselectform.teamId" clearable placeholder="请选择球队" style="width: 200px" @change="changeteam()">
        <el-option v-for="item in teamoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="球员">
        <el-select v-model="playerselectform.playerId" clearable placeholder="请选择球员" style="width: 200px" @change="changeplayer()">
        <el-option v-for="item in playeroptions" :key="item.id" :label="item.playerName" :value="item.id">
            {{ item.playerName }}
        </el-option>
        </el-select>
        <div v-if="playerselectform.playerId">
          <img :src="playerdataform.player.playerImg" width="120" height="120">
        </div>
        <div v-else>无图片</div>
        </el-form-item>
      </div>
        <div>
        <h2>进攻</h2>
        <el-form-item label="进球">
          <el-input v-model="playerdataform.singleGoal" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="助攻">
          <el-input v-model="playerdataform.singleAssist" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="射门">
          <el-input v-model="playerdataform.singleShoot" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="射正">
          <el-input v-model="playerdataform.singleOntarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="尝试过人">
          <el-input v-model="playerdataform.singleSurpass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成功过人">
          <el-input v-model="playerdataform.singleOksurpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>

        <div>
        <h2>传球</h2>
        <el-form-item label="传球">
          <el-input v-model="playerdataform.singlePass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成功传球">
          <el-input v-model="playerdataform.singleOkpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>

        <div>
        <h2>防守与犯规</h2>
        <el-form-item label="抢断">
          <el-input v-model="playerdataform.singlePreemption" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="越位">
          <el-input v-model="playerdataform.singleOffside" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="犯规">
          <el-input v-model="playerdataform.singleFoul" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="被犯规">
          <el-input v-model="playerdataform.singleBefouled" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="黄牌">
          <el-input v-model="playerdataform.singleYcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="红牌">
          <el-input v-model="playerdataform.singleRcard" autocomplete="off"></el-input>
        </el-form-item>
        </div>       
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="playerdataFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveplayerdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name:'Game',
  data(){
    return{
      tableData: [],
      total: 0,//总数
      current: 1,//当前页
      size: 5,//每页数量
      form:{},//添加或修改提交表单
      gamedataform:{
        homeTeamInfo:{
          teamImg:'',
          teamName:''
        },
        awayTeamInfo:{
          teamImg:'',
          teamName:''
        }
      },//比赛详细数据表单
      playerselectform:{},//查看球员场上数据时，选择球队球员表单
      playerdataform:{
        player:{
          playerImg:''
        }
      },//球员场上数据表单
      dialogFormVisible: false,
      gamedataFormVisible:false,
      playerdataFormVisible:false,
      multipleSelection: [],
      homeoptions:[],
      awayoptions:[],
      leagueoptions:[],
      seasonoptions:[],
      roundsoptions:[],
      homeTeam:"",//主场球队搜索
      awayTeam:"",//客场球队搜索
      leagueId:"",//联赛搜索
      gameRounds:"",//联赛轮次，第几轮搜索
      yardoptions:[],//所有球场列表
      gamedatagameId:"",//比赛数据外键比赛id
      teamoptions:"",//查看球员场上数据时的选择球队框
      playeroptions:"",//查看球员场上数据时的选择球员框
      playerdatagameId:"",//球员单场数据外键比赛id
    }
  },
  created(){
    this.load()
  },
  methods:{
    load(){
      this.request.get("/game/pageGame", {
        params: {
          current: this.current,
          limit: this.size,
          homeTeam:this.homeTeam,
          awayTeam:this.awayTeam,
          leagueId:this.leagueId,
          gameRounds:this.gameRounds
        }
      }).then(res => {
        console.log(res.pageGame.records)
        this.tableData = res.pageGame.records
        this.total = res.total
      }),
      //查询所有球队信息到选择框中
      this.request.get("/team/findall").then(res=>{
        this.homeoptions = []
        this.awayTeam = []
        console.log(res.data)
        this.homeoptions = res.data
        this.awayoptions = res.data
        this.yardoptions = res.data
      }),

      //查询所有联赛信息到选择框中
      this.request.get("/league/findall").then(res=>{
        console.log(res.data)
        this.leagueoptions = res.data
      })
    },

    //选择联赛时，查询该联赛的轮次和球队
    changeLeague(){
      this.request.get("/league/findOne/"+this.leagueId).then(res=>{
        if(res.code === '200'){
        this.roundsoptions=[]
        let max = res.data.leagueRounds
        this.roundsoptions[0]=1;
        for (let i = 1; i <max; i++) {
        this.roundsoptions[i]=this.roundsoptions[i-1]+1;
        }
        }else{
          this.$message.error("查找失败")
        }
    
      }),
      this.request.get("/league/findTeamByLeagueId/"+this.leagueId).then(res=>{
        if(res.code === '200'){
          this.homeoptions = []
          this.awayoptions = []
          this.homeoptions = res.data
          this.awayoptions = res.data
        }else{
          this.$message.error("查找失败")
        }
      })
    },
    //新增或修改框中，选择联赛时，查询该联赛的轮次和球队
      EditchangeLeague(){
        this.request.get("/league/findOne/"+this.form.leagueId).then(res=>{
          if(res.code === '200'){
          this.roundsoptions=[]
          let max = res.data.leagueRounds
          this.roundsoptions[0]=1;
          for (let i = 1; i <max; i++) {
          this.roundsoptions[i]=this.roundsoptions[i-1]+1;
          }
          }else{
            this.$message.error("查找失败")
          }
      
        }),
        this.request.get("/league/findTeamByLeagueId/"+this.form.leagueId).then(res=>{
        if(res.code === '200'){
          this.homeoptions = []
          this.awayTeam = []
          this.homeoptions = res.data
          this.awayoptions = res.data
        }else{
          this.$message.error("查找失败")
        }
      })
      },

    //添加或修改比赛信息
    save() {
        this.request.post("/game/saveOrUpdate", this.form).then(res => {
          if (res.code === '200') {
            this.$message.success("保存成功")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("保存失败")
          }
        })
      },  

    //查看比赛详细数据

    gamedata(row){
      
      this.gamedataform={
        homeTeamInfo:{
          teamImg:'',
          teamName:''
        },
        awayTeamInfo:{
          teamImg:'',
          teamName:''
        }
      }
      //先获取选中的比赛id值
      this.gamedatagameId = row.id
      console.log(this.gamedatagameId)
      this.gamedataFormVisible = true
      //查看比赛详细数据
      this.request.get("/game/getGamedata",{
        //后端接收参数
        params:{
          gameId:this.gamedatagameId
        }
      }).then(res=>{
        if(res.data){
            this.gamedataform = res.data;
        }
      })
  
    },
   

    //编辑比赛详细数据
    savegamedata(){
      this.request.post("/game/saveGameData",this.gamedataform,
      {
        params:{
          gameId:this.gamedatagameId
        }
      }).then(res=>{
        if (res.code === '200') {
            this.$message.success("保存成功")
            this.gamedataFormVisible = false
          } else {
            this.$message.error("保存失败")
          }
      })
    }, 

    //查出两方球队到选择框中
    playerdata(row){
      this.playerdataform={
        player:{
          playerImg:''
        }
      }
      this.playeroptions=[]
      this.playerselectform={}
      this.playerdatagameId = row.id
      
      this.playerdataFormVisible=true
      //查出两方球队到选择框中
      this.request.get("/player/getTeamByGameId",{
        params:{
          gameId:this.playerdatagameId
        }
      }).then(res=>{
        if(res.data){
          this.teamoptions=res.data
        }
      })
    },

    //选择球队时，查询该球队的球员  
    changeteam(){ 
      this.request.get("/player/getPlayerByTeamId/"+this.playerselectform.teamId).then(res=>{
        if(res.code === '200'){
          this.playeroptions = []
          this.playeroptions = res.data
          console.log(this.playeroptions)
        }else{
          this.$message.error("查找失败")
        }
      })
    },
    //选择球员时，查询该球员的数据
    changeplayer(){
      this.playerdataform={
        player:{
          playerImg:''
        }
      }
      this.request.get("/player/getPlayerData",{
        params:{
          gameId:this.playerdatagameId,
          playerId:this.playerselectform.playerId
        }
      }).then(res=>{
        if(res.data!=null){
          console.log(this.playerdatagameId)
          console.log(this.playerselectform.playerId)
          console.log(res.data)
          this.playerdataform = res.data;
        }
          
          
      })
    },


    //编辑球员场上数据
    saveplayerdata(){
      this.request.post("/player/savePlayerDataSingle",this.playerdataform,{
        params:{
          gameId:this.playerdatagameId,
          playerId:this.playerselectform.playerId
        }
      }).then(res=>{
        console.log(this.playerdatagameId)
        console.log(this.playerselectform.playerId)
        console.log(res.data)
        if (res.code === '200') {
            this.$message.success("保存成功")
            this.playerdataFormVisible = false
          } else {
            this.$message.error("保存失败")
          }
      })
    },

      handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
    del(id) {
      this.request.delete("/game/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      this.request.post("/game/delete/batch", ids).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.homeTeam = ""
      this.awayTeam = ""
      this.leagueId = ""
      this.leagueSeason = ""
      this.gameRounds = ""
      this.load()
    },
    //分页每页大小
    handleSizeChange(size) {
      console.log(size)
      this.size = size
      this.load()
    },

    //分页第几页
    handleCurrentChange(current) {
      console.log(current)
      this.current = current
      this.load()
    },
  }

}
</script>

<style>
.headerBg {
  background: #eee!important;
}
.gamedatadiv {
  justify-content:space-between
}
</style>